<template>
  <a-card>
    <h2>我的排名</h2>
    <a-table :columns="columns" :data="myMatchList" stripe :pagination="false">
      <template #matchType="{ record }">
        <a-tag>{{
          ['未知', '积分赛', '常规赛', '定段赛'][record.matchType]
        }}</a-tag>
      </template>
      <template #scheduleType="{ record }">
        <a-tag>
          {{record.scheduleType}}
        </a-tag>
      </template>
      <template #raceItemName="{ record }">
        <a-tag>
          {{record.raceItemName}}
        </a-tag>
      </template>
      <template #option="{}">
        <a-space>
          <a-button-group>
            <a-button @click="handleClick">
              <template #icon><icon-bar-chart /></template>
              查看详情
            </a-button>
          </a-button-group>
        </a-space>
      </template>
    </a-table>
    <a-pagination style="margin-top: 10px" :total="total" :current="curPage" :page-size="pageSize" />
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title> 排名详情 </template>
      <div>
        <a-table :columns="rankColumns" :data="rankList" />
      </div>
    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
  import axios from 'axios';
  import { onMounted, ref } from 'vue';

  interface ItemLabel {
    value: number;
    label: string;
  }

  const curPage = ref(1)
  const pageSize = ref(8)
  const total = ref(0)
  

  const columns = [
    {
      title: 'id',
      dataIndex: 'matchScheduleId',
    },
    {
      title: '姓名',
      dataIndex: 'nickName',
    },
    {
      title: '赛事名称',
      dataIndex: 'matchTitle',
    },
    {
      title: '类型',
      slotName: 'matchType',
    },
    {
      title: '项目',
      slotName: 'raceItemName',
    },
    {
      title: '赛程',
      slotName: 'scheduleType',
    },
    {
      title: '分数',
      dataIndex: 'score',
    },
    {
      title: '排名',
      dataIndex: 'myRank',
    },
    {
      title: '操作',
      slotName: 'option',
    },
  ];
  const rankColumns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '高校',
      dataIndex: 'school',
    },
    {
      title: '排名',
      dataIndex: 'rank',
    },
  ];
  const myMatchList = ref([] as any);
  const rankList = ref([] as any)
  const scheduleListLabels: ItemLabel[] = [
    { value: 1, label: '初赛' },
    { value: 2, label: '复赛' },
    { value: 3, label: '半决赛'},
    { value: 4, label: '决赛' }
  ];

  const matchRankScoreList = () => {
    axios.get(`match/playerRank`, {
      params:{
        
      }
    }).then(res => {
      console.log(res)
      res.forEach((element:any) => {
        element.scheduleType = scheduleListLabels.find(label => label.value === element.scheduleType)?.label || '';
        myMatchList.value.push(element)
      })
    })
  }

  onMounted(async() => {
    await matchRankScoreList()
  })

  rankList.value = [
    {
      name: '张三',
      school: '华东交通大学',
      rank: '1',
    },
    {
      name: '李四',
      school: '华东交通大学',
      rank: '2',
    },
    {
      name: '王五',
      school: '华东交通大学',
      rank: '3',
    },
    {
      name: '赵六',
      school: '南昌大学',
      rank: '4',
    },
    {
      name: '林俊杰',
      school: '东华理工大学',
      rank: '5',
    },
    {
      name: '爱奇艺',
      school: '华东交通大学',
      rank: '6',
    },
    {
      name: '薛之谦',
      school: '南昌理工学院',
      rank: '7',
    },
  ];

  const visible = ref(false);

  const handleClick = () => {
    visible.value = true;
  };
  const handleOk = () => {
    visible.value = false;
  };
  const handleCancel = () => {
    visible.value = false;
  };
</script>
